import Taro from "@tarojs/taro";
import {useEffect, useState} from "react";
import {Input, View,Text} from "@tarojs/components";
import './index.scss'
import {getCodeApi, getTokenApi} from "../../http/userApi";

function Index() {
  //显示重新获取按钮
  const [time, setTime] = useState(4)


  //设置验证码输入的
  const [code, setCode] = useState({
    one: '',
    two: '',
    thr: '',
    fou: '',
    fiv: '',
    six: ''
  })
  //输入框获取值
  const inputEvent = (name, e) => {
    console.log('sssss')
    setCode({
      ...code, [name]: e.target.value
    })
  }
  //倒计时
  const timer = setTimeout(aaaa, 1000)

  function aaaa() {
    if (time == 1) {
      setTime(0)
      return clearTimeout(timer)
    } else if (time > 1) {
      setTime(time - 1)
      return;
    } else {
      clearTimeout(timer)
      return;
    }
  }

  //判断验证码输入完成
  useEffect(() => {
    inputFinsh()


  })

  //重新获取验证码
  const getCode = () => {
    getCodeApi(Taro.getStorageSync('phone'))
      .then(res => {
        if (res.data.map.code == 1) {
          setTime(5)
        }
      })
  }
  //判断验证码输入完成
  const inputFinsh = async () => {
    if (code.one.length !== 1) {
      return
    }
    if (code.two.length !== 1) {
      return
    }
    if (code.thr.length !== 1) {
      return
    }
    if (code.fou.length !== 1) {
      return
    }
    if (code.fiv.length !== 1) {
      return
    }
    if (code.six.length !== 1) {
      return
    }
    let codes = '' + code.one + code.two + code.thr + code.fou + code.fiv + code.six;
    console.log(codes)
    getTokenApi({
      phone: Taro.getStorageSync('phone'),
      code: codes
    })
      .then(res => {
        console.log('请求成功', res)
        if (res.data.map.code == 1) {
          console.log('_----------------------')
        }
      })
      .catch(err => {
        console.log('请求失败', err)
      })
    await Taro.setStorageSync('userId', 'sss')
    Taro.switchTab({
      url: '/pages/me/index'
    })


    // Taro.navigateTo({
    //   url:'/'
    // })

    return (
      <View className='box'>
        <View style={{backgroundColor: '#fff', height: '80px', lineHeight: '80px'}}>
          <View className='iconfont icon-xiangzuo' style={{
            position: 'absolute',
            top: '0',
            left: '0',
            fontSize: '22px',
            paddingTop: '6px',
            display: 'flex'
          }}
                onClick={() => Taro.navigateBack()}>
            <View style={{fontSize: '14px', paddingLeft: '4px'}}>输入验证码</View>
          </View>
          <View style={{textAlign: 'center', width: '100%'}}></View>
        </View>

        <View className='plaseInput'>请输入验证码</View>
        <View className='huiseTitle'>验证码已发送至您的手机</View>
        <View className='huiseTitle'>{Taro.getStorageSync('phone')}</View>
        <View className='getCode'>
          <View className='text'>6位数字验证码</View>
          <View className='btn' onClick={getCode} style={{display: time == 0 ? 'block' : 'none'}}>重新获取</View>
          <View style={{display: time == 0 ? 'none' : 'block'}}>{time}秒后重新获取</View>
        </View>
        <View className='input_box'>
          <Input value={code.one} type={"number"} maxlength={1} holdKeyboard={true}
                 onInput={(e) => inputEvent('one', e)}></Input>
          <Input value={code.two} type={"number"} maxlength={1} holdKeyboard={true}
                 onInput={(e) => inputEvent('two', e)} focus={code.one.length == 1}></Input>
          <Input value={code.thr} type={"number"} maxlength={1} holdKeyboard={true}
                 onInput={(e) => inputEvent('thr', e)} focus={code.two.length == 1}></Input>
          <Input value={code.fou} type={"number"} maxlength={1} holdKeyboard={true}
                 onInput={(e) => inputEvent('fou', e)} focus={code.thr.length == 1}></Input>
          <Input value={code.fiv} type={"number"} maxlength={1} holdKeyboard={true}
                 onInput={(e) => inputEvent('fiv', e)} focus={code.fou.length == 1}></Input>
          <Input value={code.six} type={"number"} maxlength={1} holdKeyboard={true}
                 onInput={(e) => inputEvent('six', e)} focus={code.fiv.length == 1}></Input>
        </View>
        <View className='bottom'>
          <Text>未注册用户将自动为您创建账号，输入验证码及表示同意《</Text>

          <Text className='text'>用户注册协议</Text>
          <Text>》</Text>
        </View>
      </View>
    )
  }
}
export default Index;
